<template>
  <dv-scroll-board class="table" v-bind="$attrs" />
</template>

<script>
const throttle = function(fn, delay) {
  const timer = null
  let t_start
  return function() {
    const context = this,
      args = arguments,
      t_curr = +new Date()
    clearTimeout(timer)
    if (!t_start || t_curr - t_start >= delay) {
      fn.apply(context, args)
      t_start = t_curr
    } else {
      // timer = setTimeout(() => {
      //   fn.apply(context, args)
      // }, delay)
    }
  }
}
export default {
  data() {
    return {
      tooltip: null
    }
  },
  mounted() {
    const _this = this
    setTimeout(() => {
      document.querySelectorAll('.ceil').forEach(item => {
        item.addEventListener('mousemove', function(e) {
          _this.showTooltip(e, e.target.innerText)
        })
      })
      document.querySelectorAll('.dv-scroll-board').forEach(item => {
        // item.addEventListener(
        //   'mouseenter',
        //   function(e) {
        //     console.log('移入')
        //     _this.createTooltip()
        //   },
        //   true
        // )
        item.onmouseenter = function(e) {
          console.log('移入')
          _this.createTooltip()
        }
      })
      document.querySelectorAll('.dv-scroll-board').forEach(item => {
        // item.addEventListener(
        //   'mouseleave',
        //   function(e) {
        //     console.log('移除')
        //     _this.hideTooltip()
        //   },
        //   true
        // )
        item.onmouseleave = function(e) {
          console.log('移除')
          _this.hideTooltip()
        }
      })
    }, 500)
  },
  methods: {
    createTooltip() {
      this.hideTooltip()
      this.tooltip = document.createElement('div')
      this.tooltip.className = 'table-tooltip'
      document.body.appendChild(this.tooltip)
    },
    hideTooltip: function() {
      if (this.tooltip) {
        document.body.removeChild(this.tooltip)
        this.tooltip = null
      }
    },
    showTooltip: throttle(function(elem, message) {
      const target = document.querySelector('.table-tooltip')
      if (target && elem) {
        const rect = target.getBoundingClientRect()
        target.innerText = elem.target.innerText
        target.style.top = elem.y - rect.height - 30 + 'px'
        target.style.left = elem.x - rect.width / 2 + 'px'
      }
    }, 100)
  }
}
</script>

<style>
.table-tooltip {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  z-index: 1000;
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px;
  border-radius: 5px;
  color: #000;
}
</style>

